在Cloudreve网盘系统中集成kkFileView在线预览（暂时） |
您所在的位置：网站首页 › cloudreve 预览 › 在Cloudreve网盘系统中集成kkFileView在线预览（暂时） |
|
服务器：WindowsServer 2016
Cloudreve
需求方想整一个在小团队内部使用的网盘系统，最终在千挑万选之下选中了Cloudreve。 Github地址：https://github.com/cloudreve/Cloudreve 官网地址：https://docs.cloudreve.org Cloudreve是采用go + React开发的开源网盘系统，优点是部署简单、界面功能精简好用、更新比较活跃、文档详细，目前在Github的Star 1.6w+。 第一步：下载下载后的文件结构如下图所示（只有cloudreve.exe和conf.ini） nssm下载链接 提取码: dtbb 第二步：修改配置文件配置文件主要还是配置端口和数据库，其他详细配置可以去官网查看 [System] Debug = false Mode = master Listen = :7018 SessionSecret = iA9nowZRHi6s5XSAFEVrNl0njyqZfjmx6mZQGWVBbMQG32SE5dx6pVWPTNTeByTh HashIDSalt = 5hrN8NvlA7LxdVJCkjlHb5A1Ut2Rph85GqfhwZWvpn2tnGi79uEomziXkHStFMZT [Database] Type = mysql Port = 3306 User = cloudreve Password = xxxxx Host = 0.0.0.0 Name = Cloudreve TablePrefix = cd Charset = utf8 第三步：启动双击cloudreve.exe文件便可以直接启动，启动成功的界面如下： 初始化的数据库表： 真正使用还是建议部署成windows服务，这时候可以使用上面提到的nssm工具。 cd到nssm工具对应的目录，输入：nssm install便会出现如下界面： 安装成功后，进到服务管理启动对应的服务即可。 系统成功启动后的界面如下： kkFileView网盘部署好了，需求方又提了个需求，想要支持在线预览。 Cloudreve自带预览PDF和TXT格式的文件，如果需要预览Office相关文件就需要自己对接第三方服务。 目前提供在线预览的第三方服务有很多，比如微软大大就提供有免费的文档在线预览服务，但前面有说到，网盘系统是在内部使用，这一条只能pass，第三方不行那就自己做第三方。 于是，万能的Github又登场了。 kkFileView是采用java开发的文件文档在线预览方案，目前在Github的Star 7.8K+。 Github地址：https://github.com/kekingcn/kkFileView Gitee地址：https://gitee.com/kekingcn/file-online-preview 官网地址：https://kkfileview.keking.cn 两个系统都有个优点，就是部署简单，文档详细。 下载下来的文件结构如下，点击 startup.bat 文件等待片刻后在浏览器中打开：http://localhost:8012 便会看到kkFileView的测试页面。 如果能看到上图就表示启动成功了，大家可以自行在测试页面上测试相关文件的预览效果，具体的参数配置可以参考官方文档，非常详细。 集成上面两步我们已经将网盘服务和在线预览服务都部署成功了，接下来就是合二为一。 我们先进到Cloudreve的管理面板 —— 参数设置，有两个信息我们需要配置。 1、站点URL记得添加端口号 2、图像与预览修改Office 文档预览服务地址：http://127.0.0.1:8012/onlinePreview?url={$srcB64}最后点击保存几即可。 配置成功后，我们去试试预览效果，双击对应的文件： 诶，怎么回事，预览失败了，而且这个文件类型 lpmatwo4pg1n8bc6 是什么鬼。 其实这与kkFileView的预览机制有关系，kkFileView预览是通过下载地址的文件后缀名去判断文件类型，但Cloudreve生成的下载链接文件名是一串随即字符且不包括文件后缀，所以kkFileView在处理时不知道对应的文件类型，导致预览失败。 知道问题了就有解决办法： 修改Cloudreve的下载链接生成逻辑，使其带上文件后缀 修改kkFileView的文件类型识别逻辑 因为Cloudreve是将前后端统一打包成exe可执行程序，如果修改后还要打包太麻烦，所以放弃解决办法一（其实这个解决办法才是相对科学的。） 修改先去Gitee或者Github下载kkFleView源码 下载下来后可以根据如下路径找到对应文件： file-online-preview-master\server\src\main\java\cn\keking\web\controller\OnlinePreviewController.java修改思路：根据文件的前n个起始字节，也被称为魔数去判断对应文件属于什么文件类型，但是这个方法也存在缺陷，wps和office相关文件的魔数一样，无法做详细区分，比如：docx、xlsx、pptx。 上代码因为本人是微软阵营的，对Java这块不熟悉，代码仅做参考。 1、建立魔数与文件类型的键值对映射关系（只列举了常用的一些，准不准确大家可以自行验证） public final static Map FILE_TYPE_MAP = new HashMap(); static { FILE_TYPE_MAP.put("ffd8ff", "jpg"); FILE_TYPE_MAP.put("89504e47", "png"); FILE_TYPE_MAP.put("47494638", "gif"); FILE_TYPE_MAP.put("49492a00227105008037", "tif"); FILE_TYPE_MAP.put("424d228c010000000000", "bmp"); // 16色位图(bmp) FILE_TYPE_MAP.put("424d8240090000000000", "bmp"); // 24位位图(bmp) FILE_TYPE_MAP.put("424d8e1b030000000000", "bmp"); // 256色位图(bmp) FILE_TYPE_MAP.put("41433130313500000000", "dwg"); FILE_TYPE_MAP.put("68746d6c3e", "html"); // HTML FILE_TYPE_MAP.put("48544d4c207b0d0a0942", "css"); FILE_TYPE_MAP.put("696b2e71623d696b2e71", "js"); FILE_TYPE_MAP.put("38425053000100000000", "psd"); FILE_TYPE_MAP.put("255044462d312e", "pdf"); FILE_TYPE_MAP.put("75736167", "txt"); FILE_TYPE_MAP.put("00000020667479706d70", "mp4"); FILE_TYPE_MAP.put("49443303000000002176", "mp3"); FILE_TYPE_MAP.put("41564920", "avi"); FILE_TYPE_MAP.put("3c3f786d6c", "xml");// xml文件 FILE_TYPE_MAP.put("504b03040a000", "office");// office文件 FILE_TYPE_MAP.put("504b030414000", "office");// office文件 FILE_TYPE_MAP.put("d0cf11e0a1b11ae10000", "wps");// WPS文字wps、表格et、演示dps都是一样的 }注意：office和wps下的相关文件（docx、xlsx、pptx）的魔数都一样，所以大家可以默认设置成其中一种即可（我默认的是xlsx），kkFileView预览office相关文件依赖的是OpenOffice和LibreOffice。 2、根据文件流判断文件类型 /** * 获取文件类型 */ private String getFileType(String fileUrl) throws IOException { URL newUrl = new URL(fileUrl); HttpURLConnection conn = (HttpURLConnection) newUrl.openConnection(); InputStream inputStream = conn.getInputStream(); byte[] bytes = IOUtils.toByteArray(inputStream); StringBuilder stringBuilder = new StringBuilder(); for (int i = 0; i < 20; i++) { int v = bytes[i] & 0xFF; String hv = Integer.toHexString(v); if (hv.length() < 2) { stringBuilder.append(0); } stringBuilder.append(hv); } String fileCode = stringBuilder.toString().toLowerCase(); String fileType = null; Iterator keyIter = FILE_TYPE_MAP.keySet().iterator(); while (keyIter.hasNext()) { String key = keyIter.next(); if (fileCode.startsWith(key)) { fileType = FILE_TYPE_MAP.get(key); break; } } return fileType; } 3、找到OnlinePreviewController.java文件的对应方法主要是在getFileAttribute方法内加一层后缀名的处理，为了不影响原方法，所以我们新增一个 /** * 获取文件属性（扩展无后缀名） * * @param url url * @return 文件属性 */ public FileAttribute getFileAttributeEx(String url, String suffix, HttpServletRequest req) { FileAttribute attribute = new FileAttribute(); FileType type; String fileName; String fullFileName = WebUtils.getUrlParameterReg(url, "fullfilename"); if (StringUtils.hasText(fullFileName)) { fileName = fullFileName; type = FileType.typeFromFileName(fullFileName); suffix = KkFileUtils.suffixFromFileName(fullFileName); } else { fileName = WebUtils.getFileNameFromURL(url); String newUrl = url; int index = newUrl.indexOf("?"); if (index < 0) { newUrl = newUrl + "." + suffix; } else { newUrl = newUrl.substring(0, index) + "." + suffix + newUrl.substring(index, newUrl.length() - 1); } type = FileType.typeFromUrl(newUrl); suffix = WebUtils.suffixFromUrl(newUrl); } if (url.contains("?fileKey=")) { attribute.setSkipDownLoad(true); } attribute.setType(type); attribute.setName(fileName + "." + suffix); attribute.setSuffix(suffix); attribute.setUrl(url); ...... return attribute; }完事后我们再来看看预览效果： 原文件： 预览效果：注意：kkFileView对xlsx和xls文件的处理默认是以html形式转换，其他文件都是以pdf形式，由于xlsx和xls转pdf后的效果太过凌乱，权衡利弊下office和wps相关的文件全部指定为xlsx，以html形式展示。 最后，这个问题其实很早就有人提出过，Cloudreve的作者也在Issues中回复下个版本会增加单独扩展名变量，所以文章的解决方案仅仅做一个分享，大家等Cloudreve版本更新会更好。 2022-12-13 10:58今天意外发现Cloudreve在响应信息中对文件名做了隐蔽的处理 2022-12-16闲着无事，用.net写了一个kkfileview类似的丐中钙版 https://gitee.com/dotnetboy/hhfileview |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |